﻿@model DJY.Domain.ViewModel.FlowUserViewModel
@{
    ViewBag.Title = "Form";
    Layout = "~/Views/Shared/_Form.cshtml";
}

<style>
    .tab-pane ul, fieldset ul {
        list-style: none;
        padding-left: 10px;
        border: 1px inset #ccc;
        margin-bottom: 0px;
        overflow: scroll;
    }

        .tab-pane ul li, fieldset ul li {
            display: inline-block;
            margin-right: 5px;
        }

    i {
        cursor: pointer;
    }

    #selectList {
        padding-top: 3px;
    }

        #selectList li {
            margin-bottom: 3px;
            padding: 3px;
            border: 1px solid #ccc;
        }

            #selectList li i {
                margin-left: 3px;
            }

    #form1 > div {
        margin-top: 10px;
        width: calc(50% - 2px);
        display: inline-block;
    }

    .search .form-group, .search .checkbox {
        display: inline-block;
        margin: 3px;
    }

        .search .checkbox label {
            line-height: 20px;
        }

        .search .form-group .form-control {
            padding: 3px 6px;
            height: 29px;
        }

    fieldset legend {
        margin-bottom: 5px;
    }
</style>
<form id="form1">
    <div>
        <ul class="nav nav-tabs">
            <li class="active"><a href="#users" data-toggle="tab">人员</a></li>
        </ul>
        <div class="tab-content">
            <div id="users" class="tab-pane active">
                <div class="search">
                    <div class="form-group">
                        @if (Model.roles == null)
                        {
                            <text><select id="roles"></select></text>
                        }
                        else
                        {
                            Html.DropDownList("roles", Model.roles.Select(kv => new SelectListItem() { Text = kv.Value, Value = kv.Key }), "--角色--", new { id = "roles" });
                        }
                    </div>
                    <div class="form-group">
                        @if (Model.departs == null)
                        {
                            <text><select id="departs"></select></text>
                        }
                        else
                        {
                            Html.DropDownList("departs", Model.departs.Select(kv => new SelectListItem() { Text = kv.Value, Value = kv.Key }), "--部门--",new { id = "departs" });
                        }
                    </div>
                    <div class="form-group">
                        @if (Model.posts == null)
                        {
                            <text><select id="posts"></select></text>
                        }
                        else
                        {
                            Html.DropDownList("posts", Model.posts.Select(kv => new SelectListItem() { Text = kv.Value, Value = kv.Key }), "--岗位--",new { id = "posts" });
                        }
                    </div>
                    <div class="form-group">
                        <input type="text" placeholder="关键字" id="userKws" name="userKws" class="form-control" />
                    </div>
                    <i class="fa fa-search" data-type="u"></i>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="ckAllUser" name="ckAllUser" data-type="u" /> 全部
                        </label>
                    </div>
                </div>
                <ul id="userList">
                </ul>
            </div>
        </div>
    </div>
    <div style="float:right;margin-top:18px;">
        <fieldset>
            <legend>已选择</legend>
            <ul id="selectList">
            </ul>
        </fieldset>
    </div>
</form>
<script>
    //多选
    var multi = true;
    function init(users) {
        $("#selectList").empty();
        if (users && users.length > 0) {
            if (multi) {
                for (var i = 0, j = users.length; i < j; i++) {
                    var item = $("<li><span></span><i class=\"fa fa-remove fa-lg\"></i></li>").attr("id", users[i].userId)
                        .attr("title", users[i].depart && users[i].post ? (users[i].depart + "-" + users[i].post):"").data("obj", users[i]);
                    item.find("span").text(users[i].user);
                    $("#selectList").append(item);
                }
            }
            else {
                var idx = users.length - 1;
                var item = $("<li><span></span><i class=\"fa fa-remove fa-lg\"></i></li>").attr("id", users[idx].userId)
                    .attr("title",users[idx].depart && users[idx].post ? (users[idx].depart + "-" + users[idx].post):"").data("obj", users[idx]);
                item.find("span").text(users[idx].user);
                $("#selectList").append(item);
            }
        }
    }

    function getUsers() {
        var result = [];
        $("#selectList li").each(function (i, o) {
            result.push($(o).data("obj"));
        });
        return result;
    }
    $(function () {
        $(".tab-pane ul").height($(window).height() - $("ul.nav-tabs").height() - 48);
        $("#selectList").height($(window).height() - 47);
        $("#userKws").on("keypress", function (evt) {
            if (evt.keyCode == 13) {
                $(this).parent().next("i").trigger("click");
            }
        });
        $(".search i").on("click", function () {
            var that = this;
            $("#ckAllUser").prop("checked",false);
            $.post("/WorkFlow/WorkFlow/SearchFlowUser", {
                role: $("#roles").val(),
                depart: $("#departs").val(),
                post:$("#posts").val(),
                kws: $("#userKws").val()
            }, function (rsp) {
                var pl = $(that).parent().next().empty();
                for (var i = 0, j = rsp.length; i < j;i++) {
                    var id = "ck_" + rsp[i].userId;
                    var item = $("<li><input type=\"checkbox\" /><label>[<span class=\"user-depart\"></span>-<span class=\"user-post\"></span>]<span class=\"user\"></span>(<span class=\"user-role\"></span>)</label></li>");
                    item.find(":checkbox").val(rsp[i].userId).data("obj", rsp[i])
                        .attr("id", id).prop("checked", $("#" + rsp[i].userId).length > 0);
                    item.find("label").attr("for", id);
                    item.find("span.user-depart").text(rsp[i].depart);
                    item.find("span.user-post").text(rsp[i].post);
                    item.find("span.user-role").text(rsp[i].role);
                    item.find("span.user").text(rsp[i].user);
                    pl.append(item);
                }
            }, "json");
        });
        $(".tab-pane ul").on("change", ":checkbox", function () {
            var id = $(this).val();
            if ($(this).prop("checked")) {
                if (!multi) {
                    $("#selectList").empty();
                }

                var d = $("#" + id);
                if (d.length == 0) {
                    var user = $(this).data("obj");
                    var item = $("<li><span></span><i class=\"fa fa-remove fa-lg\"></i></li>").attr("id", user.userId)
                        .attr("title", user.depart + "-" + user.post).data("obj", user);
                    item.find("span").text(user.user);
                    $("#selectList").append(item);
                }
            }
            else {
                $("#" + id).remove();
            }
        });
        $(".search :checkbox").on("change", function () {
            if (!multi) {
                return;
            }

            if ($(this).prop("checked")) {
                $(this).closest(".search").next().find("li").each(function (i, o) {
                    var user = $(o).data("obj");
                    if ($("#" + user.userId).length == 0) {
                        var item = $("<li><span></span><i class=\"fa fa-remove fa-lg\"></i></li>").attr("id", user.userId)
                            .attr("title", user.depart + "-" + user.post).data("obj", user);
                        item.find("span").text(user.user);
                        $("#selectList").append(item);
                    }
                });
            }
            else {
                $(this).closest(".search").next().find("li").each(function (i, o) {
                    $("#" + $(o).attr("id").substring(3)).remove();
                });
            }
        });
        $("#selectList").on("click", "i", function () {
            var p = $(this).parent();
            p.remove();
            $("#ck_" + p.attr("id")).prop("checked", false);
        });
    });
</script>
